<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <title>创建表格</title>
</head>
<style> 
    * {margin: 0; padding: 0;}
    .container{width: 90%;max-width: 960px;margin: 0 auto;margin-top: 25px;}
	 table{width: 100%;border-width: 1px;border-color: #000;border-collapse: collapse; } 
    table.tftable tr {background-color: #ffffff; } 
    td,th{ text-align:center; font-size: 12px;border-width: 1px;padding:0;border-style: solid;border-color: #000;height: 36px;overflow: hidden;position: relative;}
    .top{    display: flex;
    justify-content: center;
    margin: 20px;
    align-items: center;}
    .top button{    height: 26px;
    color: #000;
    background-color: #fff;
    margin-left: 20px;
    padding: 3px 15px;
    border: none;
    box-shadow: 1px 1px 4px;}
    .top>input{    width: 75px;
    height: 25px;
    text-align: center;
    font-size: 18px;}
    td>input[type=checkbox]{    position: absolute;
    right: 0;
    top: 0;}

    #menu{
width: 125px; /*设置为0 隐藏自定义菜单*/ 
overflow: hidden; /*隐藏溢出的元素*/
box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
position: absolute; background-color: #fff;
}
.menu{
width: 130px;
height: 25px;
line-height: 25px;
padding: 0 10px;
}
#s{width: 100%; height: 300px;}
</style>
<body>
    <div class="container">
        <div id="app">
            <div class="top">
                <span>行数：</span><input v-model="rowCount" />
                <span>列数：</span><input v-model="columnCount" />
                <button @click="createTable">submit</button>
            </div>
            <div id="table">
<table @click="menuShow=0" contenteditable="true"> 
    <tr v-for="(v,k) in column" >
        <td v-for="(vv,kk) in v" @click="column[k][kk].s=!vv.s" v-bind:rowspan="vv.r>1?vv.r:false" v-bind:colspan="vv.c>1?vv.c:false"  v-if="vv.r>0 && vv.c>0">{{k+1}}:{{kk+1}}<input type="checkbox" checked="true"  v-if="vv.s"  /></td> 
    </tr>

</table>
            </div>
            <div class="foot"  >
                <button @click="showCode">Create&Copy</button>
                <textarea id="s" v-bind:value="content"> 
                </textarea>
            </div>
            <div id="menu" v-show="menuShow">
                <div class="menu" @click="merge">合并</div> 
            </div>
        </div> 
    </div>
    
</body>
<script>
    var Vue=new Vue({
        el: '#app',
        data:{  
            column:[
                [{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0}],
                [{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0}],
                [{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0}],
                [{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0}],
            ],
            menuShow:false,
            rowCount:7,
            columnCount:9,
            content:''
        }, 
        mounted:function(){
            document.querySelector('table').oncontextmenu=function(e){
                console.log(1);
                e.preventDefault();
                var menu=document.querySelector("#menu");
                menu.style.left=e.clientX+'px';
                menu.style.top=e.clientY+'px';
                Vue.menuShow=1;
            }
        },
        computed:{
             
        },
        methods:{ 
            clearSelect:function(){
                for(let i=0;i<this.column.length;i++){
                    for(let j=0;j<this.column[i].length;j++){
                        this.column[i][j].s=0;
                    }
                }
            },
            createTable:function(){
                var t= new Array();//[{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0},{'r':1,'c':1,'s':0}];  
                for(var j=0;j<this.columnCount;j++){ 
                    var tt=new Array();
                    for(var i=0;i<this.rowCount;i++){ 
                        tt.push({'r':1,'c':1,'s':0}); 
                    }
                    t.push(tt);
                } 
                this.column=t;
            },
            merge:function(){
                var cc=this.column;
                var rs=0,re=0,cs=0,ce=0;
                for(let i=0;i<cc.length;i++){
                    for(let j=0;j<cc[i].length;j++){
                        if(cc[i][j].s){
                            re=i+cc[i][j].r-1;
                            ce=j+cc[i][j].c-1;
                            if(rs==0 && cs==0){
                                rs=i;
                                cs=j;
                            }
                        }
                    }
                }
                var tnum=0;
                if(re<rs){
                    tnum=rs;
                    rs=re;
                    re=tnum;
                }
                if(ce<cs){
                    tnum=cs;
                    cs=re;
                    ce=tnum;
                }
                for(let i=0;i<cc.length;i++){
                    for(let j=0;j<cc[i].length;j++){
                        if(i==rs && j==cs){
                            this.column[i][j].r=re-rs+1;
                            this.column[i][j].c=ce-cs+1;
                        }else if(i>=rs && i<=re && j>=cs && j<=ce){
                            this.column[i][j].r=0;
                            this.column[i][j].c=0;
                        }
                        
                    }
                }
                this.clearSelect();
                this.menuShow=false;
            },
            showCode:function(){ 
                    var h=document.getElementById('table').innerHTML; 
                    h=h.replace(/data-row=\"\d\"\sdata-column=\"\d\"/g,'');
                    h=h.replace('contenteditable="true"',''); 
                    h=h.replace('                    ','');
                    h=h.replace(/<!---->/g,'');
                    h=h.replace(/<tr>/g,"\n\t<tr>");
                    h=h.replace(/<\/tr>/g,"\n\t</tr>");
                    h=h.replace(/<td>/g,"\n\t\t<td>");
                    h=h.replace(/<\/tbody>/g,"\n</tbody>");
                    h=h.replace(/<\/table>/g,"\n</table>");
                    this.content=h;
                    console.log(h);
                    var i= document.querySelector('#s'); 
                    i.select();
                    document.execCommand("copy");  
            }
        }
    }); 
    
</script>

</html>